<template>
    <div>
        <h1>门店信息显示</h1>
        <hr>
        <a href="/HAdd">门店信息新增</a>
        <br>
        <a href="/RShow">房价信息显示</a>
        <hr>
        门店名称：<input type="text" v-model="cha.HName">
        门店状态：
        <select v-model="cha.HState">
            <option value="null">请选择</option>
            <option value="true">开店</option>
            <option value="false">闭店</option>
        </select>
        <input type="button" value="查询" @click="HShow">
        <input type="button" value="重置" @click="chong">
        <table class="table">
            <thead>
                <tr>
                    <td>门店编号</td>
                    <td>门店名称</td>
                    <td>店长名称</td>
                    <td>门店图片</td>
                    <td>录入门店时间</td>
                    <td>门店地址</td>
                    <td>门店状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.HId}}</td>
                    <td>{{a.HName}}</td>
                    <td>{{a.HProName}}</td>
                    <td><img :src="'https://localhost:7206/'+a.HImg" style="height: 60px; width: 60px;"></td>
                    <td>{{moment(a.MDate).format("YYYY年MM月DD日")}}</td>
                    <td>{{a.HApp}}</td>
                    <td>{{a.HState?"开店":"闭店"}}</td>
                    <td>
                        <input type="button" value="修改状态" @click="HUpdState(a.HId)">
                        <input type="button" value="修改" @click="Upd(a.HId)">
                    </td>
                </tr>
            </tbody>
        </table>

        <hr>
        一共{{page.zys}}页，一共{{page.zhs}}行，第{{cha.Pageindex}}页，每页{{cha.Pagesize}}行

        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" v-for="a in page.zys" :value="a" @click="ym(a)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        页容量：
        <select v-model="cha.Pagesize" @click="yrl">
            <option value="2">请选择</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="7">7</option>
            <option value="10">10</option>
        </select>    
        <input type="text" v-model="cha.Pageindex"><input type="button" value="跳转" @click="tz">
    </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter } from 'vue-router';


onMounted(()=>{
    HShow()
})

const yrl = ()=>{
    HShow()
}
const ym = (val:any)=>{
    cha.value.Pageindex=val
    HShow()
}
const tz = ()=>{
    HShow()
}

const data = ref([{
    "HId": 1,
      "HName": "轻轻饭店",
      "HProName": "青青",
      "HImg": "string",
      "MDate": "2025-06-16T07:57:40.365",
      "HApp": "山西临汾",
      "HState": true
}])

const cha = ref({
    Pageindex:1,
    Pagesize:2,
    HName:"",
    HState:null

})
const chong = ()=>{
    cha.value.HName="",
    cha.value.HState=null
    HShow()
}

const page = ref({
    zys:0,
    zhs:0
})


const fy = (e:any)=>{
    if(e==1){
        cha.value.Pageindex=1;
        HShow()
    }

    if(e==2){
        if(cha.value.Pageindex>1){
            cha.value.Pageindex-=1;
            HShow()
        }
    }

    if(e==3){
        if(cha.value.Pageindex<page.value.zys){
            cha.value.Pageindex+=1;
            HShow();
        }
    }


    if(e==4){
        cha.value.Pageindex = page.value.zys;
        HShow()
    }
}

const HShow=()=>{
    axios.get('https://localhost:7206/api/House/HShow',{params:cha.value}).then(res=>{
        data.value = res.data.list
        page.value.zhs = res.data.count;
        page.value.zys = Math.ceil(page.value.zhs/cha.value.Pagesize)
    })
}


//修改状态
const HUpdState =(e:any)=>{
    if(confirm('确定修改吗？')){
        axios.get('https://localhost:7206/api/House/HUpdState',{params:{HId:e}}).then(res=>{
            if(res.data>0){
                alert('修改状态成功')
                HShow();
            }
            else{
                alert('修改状态失败')
            }
        })
    }
}
const router = useRouter();
//反填
const Upd=(e:any)=>{
    router.push({path:"/HUpd",query:{HId:e}});
}



</script>

<style scoped>

</style>